<template>
  <!--<el-button v-for="item3 in btnList" :icon="item3.icon" @click="btnClick(item3.id)">-->
  <!--  {{item3.label}}-->
  <!--</el-button>-->
  <el-alert :closable="false">
    <el-button type="primary" icon="el-icon-plus" @click="addBtn">添加</el-button>
    <el-button type="danger" :disabled="disabled" @click="plDelete">批量删除</el-button>
  </el-alert>
  <el-table :data="tableData" border  @selection-change="handleSelectChange">
    <template v-for="(item) of columns">
        <el-table-column v-if="item.type == 'button'" :label="item.label" :prop="item.prop" :type="item.type">
          <template #default="scope">
            <el-button  v-for="item2 in item.list" size="mini"
                        :type="item2.type" @click="handleBtn(scope.row, item2.id)"
                        >
              {{item2.label}}
            </el-button>
            <!--<el-divider direction="vertical"></el-divider>-->
          </template>
      </el-table-column>
      <el-table-column v-else :label="item.label" :prop="item.prop" :type="item.type">
        <template v-if="item.id == 'state'" #default="scope">
              <span>{{(scope.row.state== 1)?'正常':'禁用'}}</span>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="CurrentChange"
    :current-page='this.page.pageNum'
    :page-sizes="[10, 2, 3, 4]"
    :page-size="this.page.pageSize"
    :total="this.page.count"
    layout="total,sizes, prev, pager, next, jumper">
  </el-pagination>
</template>

<script>
export default {
  name: "tableList",
  props: {
    tableData: {type: Object,},
    columns: {type: Object,},
    page: {type:Object},
    btnList: {typeof :Object},
    disabled: {type: Boolean}  },
  emits: ['add','edit','delete','jurisdiction','menu','roleUser','pageChange',
    'handleSelectChange','addBtn','plDelete'],
  data() {
    return {
      pageC: {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
      },
      seles: [],//选中的行
    }
  },
  methods: {
    handleSelectChange(data) {
      this.seles = data;
      console.log(this.seles)
      this.$emit('handleSelectChange', this.seles)
      //if (this.seles.length > 0) {
      //  let arr = [];
      //  for (let i = 0; i < data.length; i++) {
      //    let item = data[i];
      //    arr.push(item);
      //  }
      //  this.$emit('handleSelectChange', arr)
      //  arr = [];
      //}else return
    },
    //表格按钮的操作
    handleBtn(row, btnName) {
      if (btnName === 'add') {
        //console.log('你点击的是行内添加')
        this.$emit('add', row);
      }else if (btnName === 'edit'){
        //console.log('你点击了修改')
        this.$emit('edit', row);
      }else if (btnName === 'delete'){
        //console.log('你点击了删除')
        this.$emit('delete', row);
      }else if (btnName === 'jurisdiction'){
        //console.log('你点击了权限分配')
        this.$emit('jurisdiction', row);
      }else if (btnName === 'menu'){
        //console.log('你点击了菜单分配')
        this.$emit('menu', row);
      }else if (btnName === 'roleUser'){
        //console.log('你点击了角色用户')
        this.$emit('roleUser', row);
      }else if (btnName === 'editPwd'){
        //console.log('你点击了修改密码')
        this.$emit('editPwd', row);
      }
    },
    //分页列表
    handleSizeChange(pageSize) {
      this.pageC.pageSize = pageSize
      //注意：将值传过去的时候，一定要写的是this.xxxx 这样在对，不然就会报错显示未定义
      this.$emit('pageChange',this.pageC)
    },
    CurrentChange(pageNo) {
      this.pageC.pageNo = pageNo
      this.$emit('pageChange',this.pageC)
    },
    // + 添加
    addBtn() {
      this.$emit('addBtn')
    },
    //批量删除
    plDelete() {
      this.$emit('plDelete')
    }
  }
}
</script>

<style scoped>

</style>